<template>
  <div class="payment_index">
    <div class="payment_index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">产品包<i class="el-icon-close"></i></div>
    </div>
    <div class="payment_index_bottom">
      <div class="payment_index_bottom_new">
        <div class="payment_index_bottom_new_goods">
          <div class="payment_index_bottom_new_goods_btn">
            <el-button type="primary" @click="handleAdd">添加产品包</el-button>
          </div>
          <div class="payment_index_bottom_new_goods_screening">
            <div class="payment_index_bottom_new_goods_screening_left">
              <!-- <el-radio v-model="radio" :label="estate" @change="handleRadio">{{estate}}</el-radio> -->
               <el-select v-model="selectValue" @change="selectTJ" placeholder="是否推荐">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="payment_index_bottom_new_goods_screening_right">
              <el-input v-model="input"
                        placeholder="请输入产品包信息查询"></el-input>
              <button @click="handleSearch"><i class="el-icon-search"></i>搜索</button>
            </div>
          </div>
        </div>
      </div>
      <div class="payment_index_bottom_table_box">
        <div class="payment_index_bottom_table">
          <table>
            <tr>
              <th></th>
              <th>序号</th>
              <th>产品包名称</th>
              <th>价格</th>
              <th>是否推荐</th>
              <th>报价</th>
              <th>面积</th>
              <th>户型</th>
              <th>风格</th>
              <th>已售</th>
             
              <th>操作</th>
            </tr>
            <tr v-for="(v,i) in tableList"
                :key="i">
              <td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
              <td>{{v.id}}</td>
              <td>{{v.name}}</td>
              <td>{{v.area_price}}</td>
              <td>{{v.is_push==0?"否":"是"}}</td>
              <td>{{v.price}}</td>
              <td>{{v.area}}m²</td>             
              
              <td>{{v.house_name}}</td>
              <td>{{v.style_name}}</td>
              <td>{{v.volume}}</td>
              <td>
                <button class="editor"
                        @click='_toShopInfo'
                        :data-id="v.id">详情</button>
                <button class="shelves" @click="handleDel(v.id)">删除</button>
                <!-- <button class="delete">关闭订单</button> -->
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title"
                  colspan="8">当前数据空空如也</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    	<div class="sale_bottom_page">
			<div class="sale_bottom_page_left">
				<div class="sale_bottom_page_left_checkAll" @click="handerCheckAll">
					<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
          <div class="checkbox-botton">全选</div>
				</div>				
				<el-button type="primary" @click="selectDel" :disabled="openIsDisabled ">删除</el-button>
			</div>
			<div class="sale_bottom_page_right">
				 <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="page"
				      :page-sizes="[10, 20, 30, 40]"
				      :page-size="pagesize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total"
					  background>
				</el-pagination>
			</div>
		</div>
  </div>
</template>
	
	<script>
  // import util from '@/uitls/util';
export default {
  data () {
    return {
      radio:'',//选择推荐小区
      estate:'选择推荐小区',

      input: '',
      checkAll: false,
      currentPage4: 1,
      checkBoxAll: [],				// 选中的数据
      page: 1,
      pagesize: 10,
      total: 0,
      tableList: [],
      value2: '',
      sid:null,
      openIsDisabled: false, //按钮的禁用
      checkBoxAll: [], // 选中的数据
      shelvesAlls: [],
      options:[{
        name:'是',
        value:'1'
      },{
        name:'否',
        value:'0'
      },{
        name:'所有',
        value:'all'
      }],
      selectValue:'all',
    }
  },
  mounted () {
    this.sid = localStorage.getItem('sid')  
    this._getOrdersList()
  },
  methods: {
    handleAdd(){
      this.$router.push({ path: "/productAdd" })
    },
    handleRadio(e){
      console.log(e,"xuanz-----");
    },
    //点击查询
    handleSearch(){
      this._getOrdersList()
    },
    // 多选
    handlerCheckbox(i) {
      let arr = this.checkBoxAll;
      if (arr.includes(i)) {
        let index = arr.indexOf(i);
        if (index > -1) {
          arr.splice(index, 1);
          if (this.checkBoxAll.length !== this.tableList.length) {
            this.checkAll = false;
          }
        }
      } else {
        this.checkBoxAll.push(i);
        if (this.checkBoxAll.length == this.tableList.length) {
          this.checkAll = true;
        }
      }
      this.shelvesAlls.push(this.tableList[i].id);
      console.log(this.shelvesAlls,"选中的");
    },
    // 全选与全不选
    handerCheckAll() {
      this.checkAll = !this.checkAll;
      let arr = this.tableList.length;
      this.checkBoxAll = [];
      if (this.checkAll) {
        for (let i = 0; i < arr; i++) {
          this.checkBoxAll.push(i);
        }
      } else {
        this.checkBoxAll = [];
      }
      // 去重
      let res = this.checkBoxAll;
      for (let i = 0; i < res.length; i++) {
        for (let j = i + 1; j < res.length; j++) {
          if (res[i] == res[j]) {
            res.splice(j, 1);
            j--;
          }
        }
      }
      // 全选下架
      // this.checkBoxAll.map(v => {
      //   return this.shelvesAlls.push(this.tableList[v].product_id.toString());
      // });
    },
    // 选中删除
    selectDel() {
      this.$confirm("此操作将删除选中商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let selectID = this.shelvesAlls.join(",")
          this.$http.post("/api/root/ProductPack/del", {
              id_lst: selectID,
            })
            .then(res => {
              if (res.code == 1) {
                this._getOrdersList()
                this.checkBoxAll = [];
                if (this.checkBoxAll.length == 0) {
                  this.checkAll = false;
                  this.openCenter();
                }
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this._getOrdersList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`);
      this.page = val
      this._getOrdersList()
    },
    // 获取产品列表
    _getOrdersList () {
      let params = {
        keyword:this.input,
        page:this.page,
        pagesize: this.pagesize,
        is_push:this.selectValue
      }
      this.$http.post("/api/root/ProductPack/lst",params).then(res=>{
           console.log(res, "chanpin列表数据");
        if (res.code == 1) {
          this.tableList = res.data.data ? res.data.data : [];
          this.total = res.data.count;  //总条数
          if (this.tableList.length == 0) {
              this.openIsDisabled = true;
            } else {
              this.openIsDisabled = false;
          }
        }

      })
    },
    // 是否推荐
    selectTJ(){
      this._getOrdersList()
    },
    // 消息提示
    openCenter() {
      this.$message({
        message: "删除成功",
        type: "success",
        duration: 2000,
        center: true
      });
    },

    //点击详情跳转
    _toShopInfo (e) {
      // console.log(e);
      let id = e.target.dataset.id;
      this.$router.push({ path: `/productAdd?id=${id}` })
    },
    handleDel(event){
      console.log(event,5656);
      let params = {
        id_lst:event
      }
      this.$http.post("/api/root/ProductPack/del",params).then(res=>{
        if(res.code==1){
          this.$message({
          message: '删除成功',
          type: 'success'
          });
          this._getOrdersList()
        }
      })
      
    }
  },
}
	</script>


<style lang="less" scoped="scoped">
@import "index.less";
</style>
